<script lang="ts" setup>
import { h } from "vue";
import { ElButton, ElLink } from "element-plus";
import { Link, Plus } from "@element-plus/icons-vue";
import { useRoute } from "vue-router";

import DialogCreate from "./components/DialogCreate.vue";

import ApiTicket from "@/api/ticket";
import useProTable from "@/hooks/useProTable";
import useModal from "@/hooks/useModal";

const { params } = useRoute();
const act_id = +params.actId;

const tableColumns = [
  { label: "编号", prop: "id", width: 65 },
  { label: "赠票批次号", prop: "batch_num", width: 220 },
  { label: "门票名称", prop: "ticket_title", width: 160 },
  { label: "权益包名称", prop: "pkg_name", width: 160 },
  { label: "单次生成赠票码数量", prop: "code_num" },
  { label: "单次领取票券数量", prop: "amount" },
  { label: "活动名称", prop: "act_name", minWidth: 160 },
  { label: "创建时间", prop: "create_time", width: 170 },
  {
    label: "操作",
    slot: ({ row }: any) =>
      h(
        ElLink,
        {
          icon: Link,
          type: "primary",
          href: `${act_id}/detail/${row.id}?amount=${row.amount}`,
        },
        "赠票信息"
      ),
    width: 160,
  },
];

const [Protable, { tableApi }] = useProTable({
  fetchUrl: ApiTicket.ticketSendTaskList,
  fetchOptions: { defaultSearch: { act_id } },
  tableOptions: {
    columns: tableColumns,
  },
});

const [Modal, { open, close }] = useModal({
  title: "创建赠票信息",
  width: "600px",
});

const handleSuccess = () => {
  close();
  tableApi.refresh();
};
</script>

<template>
  <div class="text-right mb-3"></div>

  <Protable>
    <template #tool-left>
      <ElButton :icon="Plus" type="primary" @click="open()">创建赠票 </ElButton>
    </template>
  </Protable>

  <Modal>
    <DialogCreate @success="handleSuccess" />
  </Modal>
</template>
